<template>
  <el-card class="form-container" shadow="never">
    <el-form :model="workorderList"
             :rules="rules"
             :inline="true"
             ref="workorderListFrom"
             label-position="left"
             label-width="130px">
      <div>
        <div>新增处理</div>
        <div>

          <el-radio>转办：
            <el-select v-model="value" placeholder="请选择组">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>

            <el-select v-model="value1" placeholder="请选择组成员">
              <el-option
                v-for="item in options1"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-radio>
        </div>

        <div>
          <el-radio-group v-model="workorderList.resource">
            <div>
              <el-radio>退单：
                <el-input
                  size="medium" style="width: 10vw"
                  placeholder="退单人"
                  suffix-icon="el-icon-s-custom"
                  v-model="workorderList.customername">
                </el-input>
              </el-radio>
            </div>
            <div>
              <el-radio>挂起</el-radio>
            </div>
            <div>
              <el-radio>归档</el-radio>
            </div>
          </el-radio-group>
        </div>
      </div>
      <div>
        <div>添加描述</div>
        <div>
          <el-input
            size="small" style="width: 10vw"
            placeholder="问题描述（必填）"
            v-model="workorderList.description">
          </el-input>
        </div>
        <div>
          <el-upload
            class="upload-demo"
            action="https://jsonplaceholder.typicode.com/posts/"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            multiple
            :limit="3"
            style="width: 20%"
            :on-exceed="handleExceed"
            :file-list="fileList">
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
          </el-upload>
        </div>
      </div>
      <div>
        <div>催办</div>
        <div>点击催办:
          <i class="el-icon-plus" @click="plus()"></i>1
        </div>
      </div>
      <div>
        <el-form-item>
          <el-button type="primary" @click="onSubmit('workorderListFrom')">保存</el-button>
          <!--<el-button v-if="!isEdit" @click="resetForm('workorderListFrom')">取消</el-button>-->
        </el-form-item>
      </div>

    </el-form>

    <div>
      <div>历史处理记录</div>
      <div v-for="workorderhistory in workorderhistoryList">
        <div>

            <span >处理组：{{workorderhistory.handlegroupname}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>

            <span >处理人：{{workorderhistory.handlepersonname}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>

            <span>操作：{{workorderhistory.opration}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>

            <span>操作时间：{{workorderhistory.createdate}}</span>
        </div>
        <div>
            <span>处理意见：{{workorderhistory.suggestion}}</span>
        </div>
      </div>


    </div>

  </el-card>
</template>

<script>
  export default {
    name: "OrderDeal",
    data() {
      return {
        workorderList: [],
        options: [{
          value: '选项1',
          label: '清算组'
        }, {
          value: '选项2',
          label: '运维组'
        }, {
          value: '选项3',
          label: '管理组'
        }, {
          value: '选项4',
          label: '客服组'
        }],
        value: '',
        options1: [{
          value: '选项1',
          label: 'admin'
        }, {
          value: '选项2',
          label: '张张张'
        }, {
          value: '选项3',
          label: '汪汪汪'
        }, {
          value: '选项4',
          label: '罗罗罗'
        }],
        value1: '',
        workorderhistoryList:[
          {"handlegroupname":"运维组","handlepersonname":"admin","opration":"新增","createdate":0,"suggestion":"涨工资"},
          ]
      }
    }
  }
</script>

<style scoped>
  .el-icon-plus {
    color: #227dff;
  }
</style>


